<template>
  <div class="page-miH page-bgBack p24">
    <a-spin :spinning="loading">
      <div class="headerBox">
        <div class="headerItem" style="background: #edfbf4">
          <img class="headerItembg" :src="weixinbg" alt="" />
          <img class="headerItemImg" :src="weixinItem" alt="" />
          <div class="headerItemTitle">
            <div>微工卡账户</div>
            <a-popover
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode;
                }
              "
              placement="bottom"
              :visible="clicked"
              trigger="click"
              @visibleChange="handleClickChange"
            >
              <template slot="content">
                <div style="padding: 8px">
                  <a-input-search placeholder="请输入关键文字" style="width: 164px" @search="onSearchAccount" />
                </div>
                <div class="accountItem" @click="handleChange(item, 1)" v-for="(item, index) in accountList" :key="index">
                  <a-tooltip>
                    <template slot="title">
                      {{ item.name }}
                    </template>
                    {{ item.name }}
                  </a-tooltip>
                </div>
              </template>

              <img
                @click="clicked = true"
                :src="weixinchange"
                alt=""
                style="margin-left: 8px; width: 14px; height: 14px; cursor: pointer"
              />
            </a-popover>
          </div>
          <div class="headerItemState">{{ weixinMoney === "绑定后可查看" ? weixinMoney : "￥" + weixinMoney }}</div>
        </div>
        <div class="headerItem" style="background: #ecf3ff">
          <img class="headerItembg" :src="zhifubaobg" alt="" />
          <img class="headerItemImg" :src="zhifubaoItem" alt="" />
          <div class="headerItemTitle">支付宝余额</div>
          <div class="headerItemState" style="cursor: pointer" @click="goZFB">点击前往商家端查询</div>
        </div>
        <div class="headerItem" style="background: #f1f1fe">
          <img class="headerItembg" :src="bankbg" alt="" />
          <!-- <a-button type="link" class="topUp" @click="topUpVisible = true">点击充值</a-button> -->
          <img class="headerItemImg" :src="bankItem" alt="" />
          <div class="headerItemTitle">
            <div>银行卡</div>
            <a-popover
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode;
                }
              "
              placement="bottom"
              :visible="clicked3"
              trigger="click"
              @visibleChange="handleClickChange3"
            >
              <template slot="content">
                <div style="padding: 8px">
                  <a-input-search placeholder="请输入关键文字" style="width: 164px" @search="onSearchAccount3" />
                </div>
                <div class="accountItem" @click="handleChange(item, 3)" v-for="(item, index) in accountListBank" :key="index">
                  <a-tooltip>
                    <template slot="title">
                      {{ item.name }}
                    </template>
                    {{ item.name }}
                  </a-tooltip>
                </div>
              </template>

              <img @click="clicked3 = true" :src="bankchange" alt="" style="margin-left: 8px; width: 14px; height: 14px; cursor: pointer" />
            </a-popover>
          </div>
          <div class="headerItemState">{{ bankMoney === "绑定后可查看" ? bankMoney : "￥" + bankMoney }}</div>
        </div>
        <div class="headerItem" style="background: #fff8e4">
          <img class="headerItembg" :src="jzbBg" alt="" />
          <a-button type="link" class="topUp" @click="topUpVisible = true">点击充值</a-button>
          <img class="headerItemImg" :src="jzbItem" alt="" />
          <div class="headerItemTitle">
            <div>支付宝记账本</div>
            <a-popover
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode;
                }
              "
              placement="bottom"
              :visible="clicked2"
              trigger="click"
              @visibleChange="handleClickChange2"
            >
              <template slot="content">
                <div style="padding: 8px">
                  <a-input-search placeholder="请输入关键文字" style="width: 164px" @search="onSearchAccount2" />
                </div>
                <div class="accountItem" @click="handleChange(item, 2)" v-for="(item, index) in accountListZFB" :key="index">
                  <a-tooltip>
                    <template slot="title">
                      {{ item.name }}
                    </template>
                    {{ item.name }}
                  </a-tooltip>
                </div>
              </template>

              <img @click="clicked2 = true" :src="zfbchange" alt="" style="margin-left: 8px; width: 14px; height: 14px; cursor: pointer" />
            </a-popover>
          </div>
          <div class="headerItemState">{{ ZFBMoney === "绑定后可查看" ? ZFBMoney : "￥" + ZFBMoney }}</div>
        </div>
      </div>
      <a-modal title="支付宝记账本充值" :visible="topUpVisible" @ok="handleTopUpAddOK" @cancel="onTopUpClose">
        <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item
            label="当前充值账户"
            ref="transferAccountInfoId"
            prop="transferAccountInfoId"
            :rules="{
              required: true,
              message: '请选择'
            }"
          >
            <a-select v-model="form.transferAccountInfoId" placeholder="请选择">
              <a-select-option v-for="(item, index) in accountListZFB" :key="index" :value="item.id">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item
            label="充值金额"
            ref="money"
            prop="money"
            :rules="{
              required: true,
              message: '请输入'
            }"
          >
            <a-input-number :min="0.01" v-model="form.money" placeholder="请输入充值金额"> </a-input-number>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
      <div class="tabsBox">
        <div :class="tabsItem1" @click="tabsChange(4, null, 4)">待发放</div>
        <div :class="tabsItem2" style="margin-left: 12px" @click="tabsChange(5, 2, 5)">发放成功</div>
        <div :class="tabsItem3" style="margin-left: 12px" @click="tabsChange(5, 3, 6)">
          发放失败
          <!-- <div style="width:4px;height:4px;background:#FF7085;border-radius:50%;margin-left:6px;margin-bottom:8px"></div> -->
        </div>
        <div :class="tabsItem4" style="margin-left: 12px" @click="tabsChange(5, 4, 7)">
          发放异常
          <!-- <div style="width:4px;height:4px;background:#FF7085;border-radius:50%;margin-left:6px;margin-bottom:8px"></div> -->
        </div>
      </div>
      <div class="searchBox">
        <a-input-search placeholder="输入批次名/申请人/用工单位" style="width: 240px" @search="onSearch" :defaultValue="selectName" />
        <a-range-picker
          class="ml12"
          style="width: 240px"
          v-model="time"
          valueFormat="YYYY-MM-DD"
          @change="getTransferAccountsBatches"
          :defaultValue="time"
        />
      </div>
      <div v-if="dataList && dataList.length">
        <div class="contentBox">
          <div class="contentItem" v-for="(item, index) in dataList" :key="index" @click="goDetail(item)">
            <div class="contentItem1">
              <div style="font-size: 18px; font-weight: 500; color: #3c3d43; display: flex; align-items: center">
                <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px">{{ item.orderTitle }}</div>
                <div
                  :class="
                    item.subjectStatus === 4 && item.payStatus === 1
                      ? 'itemState1'
                      : item.subjectStatus === 4 && item.payStatus === 5
                      ? 'itemState'
                      : (item.subjectStatus === 5 && item.payStatus === 2) ||
                        (item.subjectStatus === 5 && item.payStatus === 4 && item.isDispose === true)
                      ? 'itemState2'
                      : (item.subjectStatus === 5 && item.payStatus === 3) ||
                        (item.subjectStatus === 5 && item.payStatus === 4 && item.isDispose === false)
                      ? 'itemState3'
                      : 'itemState'
                  "
                  style="
                    margin-left: 12px;
                    width: 56px;
                    height: 18px;
                    text-align: center;
                    border-radius: 2px;
                    font-size: 10px;
                    font-weight: 400;
                  "
                >
                  {{
                    item.subjectStatus === 4 && item.payStatus === 1
                      ? "待发放"
                      : item.subjectStatus === 4 && item.payStatus === 5
                      ? "发放中"
                      : item.subjectStatus === 5 && item.payStatus === 2
                      ? "已发放"
                      : item.subjectStatus === 5 && item.payStatus === 3
                      ? "失败"
                      : item.subjectStatus === 5 && item.payStatus === 4 && item.isDispose === false
                      ? "异常"
                      : item.subjectStatus === 5 && item.payStatus === 4 && item.isDispose === true
                      ? "已处理"
                      : "--"
                  }}
                </div>
              </div>
              <div style="margin-top: 6px; display: flex" v-if="item.subjectStatus === 5 && item.payStatus === 2">
                <span style="font-size: 12px; font-weight: 400; color: #a6a8b4">批次号：</span>
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ item.thirdPartyInteriorBatchId ? item.thirdPartyInteriorBatchId : "--" }}</span>
                  </template>
                  <div
                    style="
                      width: 120px;
                      font-size: 12px;
                      font-weight: 400;
                      color: #767885;
                      margin-left: 8px;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                  >
                    {{ item.thirdPartyInteriorBatchId ? item.thirdPartyInteriorBatchId : "--" }}
                  </div>
                </a-tooltip>
              </div>
            </div>
            <div v-if="item.subjectStatus !== 4" class="contentItem2">
              <div style="font-size: 12px; font-weight: 400; color: #a6a8b4">实际发薪金额：</div>
              <div style="font-size: 14px; font-weight: 500; color: #55565d; margin-top: 6px">
                ¥ {{ item.successMoney ? item.successMoney : "0" }}
              </div>
            </div>
            <div class="contentItem3" :style="item.subjectStatus === 4 ? 'width:68%' : 'width:56%'">
              <div>
                <div style="display: flex">
                  <span class="contentItemTitle">用工单位：</span>
                  <div class="contentItemContent">
                    {{ item.companyName }}
                  </div>
                </div>
                <div style="margin-top: 6px; display: flex">
                  <span class="contentItemTitle">发薪人数：</span>
                  <div class="contentItemContent">{{ item.totalCount }}人</div>
                </div>
              </div>
              <div>
                <div style="display: flex">
                  <span class="contentItemTitle">申请人：</span>
                  <div class="contentItemContent">{{ item.createUserName }}</div>
                </div>
                <div style="margin-top: 6px; display: flex">
                  <span class="contentItemTitle">申请时间：</span>
                  <div class="contentItemContent">{{ item.gmtCreate ? moment(item.gmtCreate).format("YYYY-MM-DD HH:mm") : "--" }}</div>
                </div>
              </div>
              <div>
                <div style="display: flex">
                  <span class="contentItemTitle">预计发薪：</span>
                  <div class="contentItemContent">
                    {{ item.money ? item.money : "--" }}
                  </div>
                </div>
                <div v-if="item.subjectStatus === 5 && item.payStatus === 2" style="display: flex">
                  <span class="contentItemTitle">发放时间：</span>
                  <div class="contentItemContent">
                    {{ item.transferCreate ? moment(item.transferCreate).format("YYYY-MM-DD HH:mm") : "--" }}
                  </div>
                </div>
                <div style="margin-top: 6px; display: flex" v-if="item.payStatus === 3">
                  <span class="contentItemTitle">失败原因：</span>
                  <div class="contentItemContent">{{ item.failCause ? item.failCause : "--" }}</div>
                </div>
              </div>
            </div>

            <div class="contentItem4">
              <div class="buttons" v-if="item.subjectStatus === 5 && item.payStatus === 3">重新发起</div>
              <div class="buttons" v-else>{{ item.subjectStatus === 4 ? "薪资发放" : "查看详情" }}</div>

              <div
                style="margin-left: 12px"
                class="buttons"
                v-if="item.subjectStatus === 4 && item.payStatus === 1"
                @click.stop="deleteAccount(item)"
              >
                删除
              </div>
            </div>
          </div>
        </div>
        <div style="display: flex; justify-content: flex-end; margin-top: 24px">
          <a-pagination
            show-quick-jumper
            showSizeChanger
            :total="entityCount"
            v-model="current"
            :page-size="pageSize"
            :page-size-options="pageSizeOptions"
            @showSizeChange="sizeChange"
            @change="onChange"
          />
        </div>
      </div>
      <div v-else style="margin-top: 80px">
        <a-empty />
      </div>
    </a-spin>
  </div>
</template>

<script>
import {
  getTransferAccountsBatches,
  getAccountList,
  getAccountListZFB,
  deleteAccount,
  generateZfbMoneyToBookUrl,
  getAccountListBank
} from "./api";
export default {
  data() {
    return {
      pageSizeOptions: ["10", "20", "50", "100"],
      tabsItem1: "tabsItemOn",
      tabsItem2: "tabsItem",
      tabsItem3: "tabsItem",
      tabsItem4: "tabsItem",
      dataList: [],
      weixinMoney: "绑定后可查看",
      ZFBMoney: "绑定后可查看",
      bankMoney: "绑定后可查看",
      bankItem: require("@/assets/img/bankItem.png"),
      weixinItem: require("@/assets/img/weixinItem.png"),
      zhifubaoItem: require("@/assets/img/zhifubaoItem.png"),
      jzbItem: require("@/assets/img/jzbItem.png"),
      bankbg: require("@/assets/img/bankbg.png"),
      jzbBg: require("@/assets/img/jzbBg.png"),
      weixinbg: require("@/assets/img/weixinbg.png"),
      zhifubaobg: require("@/assets/img/zhifubaobg.png"),
      weixinchange: require("@/assets/img/weixinchange.png"),
      bankchange: require("@/assets/img/bankchange.png"),
      zfbchange: require("@/assets/img/zfbchange.png"),
      companyId: this.$store.state.hr.companyId,
      current: 1,
      pageSize: 10,
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
      selectName: undefined,
      subjectStatus: 4,
      form: {},
      clicked: false,
      topUpVisible: false,
      clicked2: false,
      clicked3: false,
      payStatus: null,
      accountListCopy: [],
      loading: false,
      entityCount: 0,
      accountList: [],
      accountListZFB: [],
      accountListBank: [],
      accountListBankCopy: [],
      accountListCopyZFB: [],
      time: [],
      typeIndex: 4
    };
  },
  created() {
    if (JSON.stringify(this.$getCondition("xzff_condition")) !== "{}") {
      var dparams = JSON.parse(this.$getCondition("xzff_condition"));
      console.log("-------------");
      console.log(dparams);
      if (dparams) {
        if (dparams.pageSize) {
          this.pageSize = dparams.pageSize;
        }
        if (dparams.pageNo) {
          this.current = dparams.pageNo;
        }
        if (dparams.selectName) {
          this.selectName = dparams.selectName;
        }
        if (dparams.subjectStatus) {
          this.subjectStatus = dparams.subjectStatus;
        }
        if (dparams.payStatus) {
          this.payStatus = dparams.payStatus;
        }
        if (dparams.gmtCreateStart && dparams.gmtCreateEnd) {
          this.time = [dparams.gmtCreateStart, dparams.gmtCreateEnd];
        }
        if (dparams.typeIndex === 4) {
          this.tabsItem1 = "tabsItemOn";
          this.tabsItem2 = "tabsItem";
          this.tabsItem3 = "tabsItem";
          this.tabsItem4 = "tabsItem";
        } else if (dparams.typeIndex === 5) {
          this.tabsItem1 = "tabsItem";
          this.tabsItem2 = "tabsItemOn";
          this.tabsItem3 = "tabsItem";
          this.tabsItem4 = "tabsItem";
        } else if (dparams.typeIndex === 6) {
          this.tabsItem1 = "tabsItem";
          this.tabsItem2 = "tabsItem";
          this.tabsItem3 = "tabsItemOn";
          this.tabsItem4 = "tabsItem";
        } else if (dparams.typeIndex === 7) {
          this.tabsItem1 = "tabsItem";
          this.tabsItem2 = "tabsItem";
          this.tabsItem3 = "tabsItem";
          this.tabsItem4 = "tabsItemOn";
        }
      }
    }

    this.getTransferAccountsBatches();
    this.getAccountList();
  },
  methods: {
    handleTopUpAddOK() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          generateZfbMoneyToBookUrl(this.form.transferAccountInfoId, this.form.money)
            .then((res) => {
              if (res.data) {
                window.open(res.data, "_blank");
                this.topUpVisible = false;
                this.form = {};
                this.$refs.ruleForm.clearValidate();
                var _this = this;
                this.$success({
                  title: "请支付成功后刷新页面",
                  okText: "立即刷新",
                  onOk() {
                    _this.getTransferAccountsBatches();
                    _this.getAccountList();
                  }
                });
              } else {
                this.$notification["error"]({
                  message: "失败",
                  description: "支付失败"
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
    onTopUpClose() {
      this.topUpVisible = false;
      this.form = {};
      this.$refs.ruleForm.clearValidate();
    },
    deleteAccount(e) {
      var that = this;
      this.$confirm({
        title: "确认删除吗?",
        onOk() {
          deleteAccount(e.id).then((res) => {
            that.$notification["success"]({
              message: "success",
              description: "删除成功"
            });
            that.getTransferAccountsBatches();
          });
        },
        onCancel() {
          console.log("Cancel");
        },
        class: "test"
      });
    },
    onSearchAccount(e) {
      if (e) {
        var arr = [];
        this.accountListCopy.forEach((item, index) => {
          if (item.name.includes(e)) {
            arr.push(item);
          }
        });
      } else {
        arr = JSON.parse(JSON.stringify(this.accountListCopy));
      }
      this.accountList = JSON.parse(JSON.stringify(arr));
    },
    onSearchAccount2(e) {
      if (e) {
        var arr = [];
        this.accountListCopyZFB.forEach((item, index) => {
          if (item.name.includes(e)) {
            arr.push(item);
          }
        });
      } else {
        arr = JSON.parse(JSON.stringify(this.accountListCopyZFB));
      }
      this.accountListZFB = JSON.parse(JSON.stringify(arr));
    },
    onSearchAccount3(e) {
      if (e) {
        var arr = [];
        this.accountListBankCopy.forEach((item, index) => {
          if (item.name.includes(e)) {
            arr.push(item);
          }
        });
      } else {
        arr = JSON.parse(JSON.stringify(this.accountListBankCopy));
      }
      this.accountListBank = JSON.parse(JSON.stringify(arr));
    },
    handleClickChange(visible) {
      this.clicked = visible;
    },
    handleClickChange2(visible) {
      this.clicked2 = visible;
    },
    handleClickChange3(visible) {
      this.clicked3 = visible;
    },
    handleChange(e, a) {
      if (a === 1) {
        this.weixinMoney = e.money;
        this.clicked = false;
      } else if (a === 2) {
        this.ZFBMoney = e.money;
        this.clicked2 = false;
      } else if (a === 3) {
        this.bankMoney = e.money;
        this.clicked3 = false;
      }
    },
    getAccountList() {
      getAccountList().then((res) => {
        this.accountList = res.data || [];
        this.accountListCopy = res.data || [];
        if (this.accountList && this.accountList.length) {
          this.weixinMoney = this.accountList[0].money;
        }
      });
      getAccountListZFB().then((res) => {
        this.accountListZFB = res.data || [];
        this.accountListCopyZfb = res.data || [];
        if (this.accountListZFB && this.accountListZFB.length) {
          this.ZFBMoney = this.accountListZFB[0].money;
        }
      });
      getAccountListBank().then((res) => {
        this.accountListBank = res.data || [];
        this.accountListBankCopy = res.data || [];
        if (this.accountListBank && this.accountListBank.length) {
          this.bankMoney = this.accountListBank[0].money;
        }
      });
    },
    goDetail(record) {
      this.$router.push({ path: "/paySalary/examineDetail", query: { record: JSON.stringify(record), pageState: true } });
    },
    getTransferAccountsBatches() {
      this.loading = true;
      var par = {
        pageNo: this.current,
        pageSize: this.pageSize,
        selectName: this.selectName,
        subjectStatus: this.subjectStatus,
        payStatus: this.payStatus ? this.payStatus : undefined,
        gmtCreateStart: this.time[0] ? this.time[0] : "",
        gmtCreateEnd: this.time[1] ? this.time[1] : "",
        "orders[0].property": "payStatus",
        "orders[0].desc": true,
        "orders[1].property": "isDispose",
        "orders[1].desc": false,
        "orders[2].property": "gmtCreate",
        "orders[2].desc": true
      };
      getTransferAccountsBatches(par)
        .then((res) => {
          this.dataList = res.data.entities;
          this.loading = false;
          this.entityCount = res.data.entityCount;

          // 缓存参数
          var p = JSON.parse(JSON.stringify(par));
          p.typeIndex = this.typeIndex;
          this.$setCondition("xzff_condition", JSON.stringify(p));
        })
        .catch((err) => {
          console.log("debug log --> ", err);
          this.loading = false;
        });
    },
    onChange(page, pageSize) {
      this.current = page;
      this.pageSize = pageSize;
      this.getTransferAccountsBatches();
    },
    goZFB() {
      window.open("https://b.alipay.com/index2.htm");
    },

    sizeChange(page, pageSize) {
      this.current = page;
      this.pageSize = pageSize;
      this.getTransferAccountsBatches();
    },
    onSearch(e) {
      this.selectName = e;
      this.current = 1;
      this.pageSize = 10;
      this.getTransferAccountsBatches();
    },
    tabsChange(e, o, t) {
      this.typeIndex = t;
      console.log("--------------");
      console.log(t);
      this.subjectStatus = e;
      this.payStatus = o;
      this.current = 1;
      this.pageSize = 10;
      this.getTransferAccountsBatches();
      if (t === 4) {
        this.tabsItem1 = "tabsItemOn";
        this.tabsItem2 = "tabsItem";
        this.tabsItem3 = "tabsItem";
        this.tabsItem4 = "tabsItem";
      } else if (t === 5) {
        this.tabsItem1 = "tabsItem";
        this.tabsItem2 = "tabsItemOn";
        this.tabsItem3 = "tabsItem";
        this.tabsItem4 = "tabsItem";
      } else if (t === 6) {
        this.tabsItem1 = "tabsItem";
        this.tabsItem2 = "tabsItem";
        this.tabsItem3 = "tabsItemOn";
        this.tabsItem4 = "tabsItem";
      } else if (t === 7) {
        this.tabsItem1 = "tabsItem";
        this.tabsItem2 = "tabsItem";
        this.tabsItem3 = "tabsItem";
        this.tabsItem4 = "tabsItemOn";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.headerBox {
  display: flex;
  justify-content: space-between;

  .headerItem {
    width: 24%;
    height: 98px;
    border-radius: 8px;
    position: relative;
    .topUp {
      position: absolute;
      top: 18px;
      left: 150px;
    }
    .headerItemImg {
      position: absolute;
      top: 24px;
      right: 40px;
      width: 48px;
      height: 48px;
    }
    .headerItembg {
      position: absolute;
      bottom: 0;
      left: 0px;
      width: 88px;
      height: 68px;
    }
    .headerItemTitle {
      font-size: 14px;
      font-weight: 400;
      position: absolute;
      top: 24px;
      left: 40px;
      color: #767885;
      display: flex;
      align-items: center;
      ::v-deep.ant-popover-inner-content {
        padding: 0;
      }
    }
    .headerItemState {
      font-size: 18px;
      font-weight: 500;
      color: #55565d;
      position: absolute;
      top: 48px;
      left: 40px;
    }
  }
}
.tabsBox {
  display: flex;
  margin-top: 24px;
  .tabsItem {
    width: 92px;
    height: 32px;
    background: #f4f6fa;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 400;
    color: #a6a8b4;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .tabsItemOn {
    width: 92px;
    height: 32px;
    background: var(--primary10);
    border-radius: 16px;
    font-size: 14px;
    font-weight: 400;
    color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
}
.searchBox {
  margin-top: 24px;
}
.listItem {
  width: 137px;
  height: 32px;
  font-size: 12px;
  font-weight: 400;
  color: #55565d;
  display: flex;
  align-items: center;
  padding-left: 8px;
}
.listItem:hover {
  background: var(--primary10);
  color: var(--primary);
}
.contentBox :hover {
  box-shadow: 0px 6px 16px 8px rgba(0, 0, 0, 0.03), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
  border: none;
}
.contentItem :hover {
  box-shadow: 0 0px 0px #ccc !important;
}
.contentBox {
  margin-top: 24px;
  .contentItem {
    height: 94px;
    margin-top: 12px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    width: 100%;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .contentItem1 {
      display: flex;
      width: 20%;
      flex-direction: column;
      padding-left: 24px;
      padding-right: 24px;
      justify-content: center;
      height: 48px;
      border-right: 1px solid #e8e8e8;
      .itemState {
        color: #386fd7;
        background: rgba(70, 134, 255, 0.12);
      }
      .itemState1 {
        color: #f79300;
        background: rgba(255, 200, 0, 0.12);
      }
      .itemState2 {
        color: #11ae8b;
        background: rgba(50, 204, 170, 0.12);
      }
      .itemState3 {
        color: #fe5770;
        background: rgba(255, 112, 133, 0.12);
      }
    }
    .contentItem2 {
      width: 12%;
      height: 48px;
      border-right: 1px solid #e8e8e8;
      display: flex;
      flex-direction: column;
      padding-left: 36px;

      justify-content: center;
    }
    .contentItem3 {
      width: 70% !important;
      height: 48px;
      border-right: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-content: space-between;

      padding: 0 36px;
      .contentItemTitle {
        font-size: 12px;
        font-weight: 400;
        color: #a6a8b4;
      }
      .contentItemContent {
        font-size: 12px;
        font-weight: 400;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100px;
        color: #767885;
      }
    }
    .contentItem5 {
      width: 68%;
      height: 48px;
      border-right: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-content: space-between;

      padding: 0 36px;
      .contentItemTitle {
        font-size: 12px;
        font-weight: 400;
        color: #a6a8b4;
      }
      .contentItemContent {
        font-size: 12px;
        font-weight: 400;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100px;
        color: #767885;
      }
    }
    .contentItem4 {
      width: 136px;
      min-width: 136px;
      max-width: 136px;
      display: flex;
      justify-content: center;
      // padding-left: 12px;
    }
  }
}
.buttons {
  color: var(--primary);
  font-size: 13px;
  font-weight: 400;
  // margin-left: 16px;
}
.accountItem {
  width: 180px;
  height: 32px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  color: #55565d;
  padding: 8px 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.accountItem:hover {
  color: var(--primary);
  background-color: var(--primary10);
}
</style>
